<template>
    <div>
        <div class="item" v-for="(item,index) of list" :key="index">
            <div class="item-tittle">
                <!-- 小图标 -->
                <span class="item-tittle-icon"></span> {{item.title}}
            </div>
            <!-- 递归组件：调用自身来循环数组中的数组 -->
            <div v-if="item.children" class="item-children">
                <detailList :list='item.children'></detailList>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'detailList',
        props: {
            list: Array
        }
    }
</script>
<style lang="less" scoped>
    // 小图标样式
    .item-tittle-icon {
        position: relative;
        top: 0.06rem;
        left: 0.06rem;
        width: .36rem;
        height: .36rem;
        background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
        background-size: .4rem 3rem;
        display: inline-block;
        margin-right: 0.1rem;
    }
    .item-tittle {
        // 文本内容样式
        line-height: 0.8rem;
        font-size: 0.32rem;
        padding: 0 0.2rem;
    }
    .item-children{
        padding: 0 0.2rem;
    }
</style>


